﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>IDrawUGuess</title>
  <link type="text/css" rel="Stylesheet" href="index.css" />
  <link type="text/css" rel="Stylesheet" href="metro.css" />
  <link type="text/css" rel="Stylesheet" href="bbutton.css" />
  <script type="text/javascript" src="javascript/socket.io.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="javascript/metro.js"></script>
  <script type="text/javascript" src="javascript/jquery-impromptu.3.1.min.js"></script>
  <script type="text/javascript" src="javascript/Index.js"></script>  
</head>
<body class="md-body">
  <header id="header" class="md-header md-header-main">
    <h1>I Draw You Guess</h1>
    <div id="logo"></div>
    <a href="home.htm" data-icon="★" class="button orange brackets glossy">New Game</a> 
    <a href="home.htm" data-icon="☺" class="button pink brackets glossy">Current Games</a>
  </header>
  <div class="md-content">
    <div class="md-container">
      <div class="md-viewport md-viewport-horizontal">
        <div class="md-scrollable">
          <div id="room">
        <!-- The User panel section -->
          <section class="md-auto-max-width">
        <h2>Users Information</h2>
        <div class="roominfo"></div>
        <div class="userinfo roundBorderC module">
          <div class="subtitle">
            Player: <span id="username" style="font-weight: bold"></span>
          </div>
          <div style="padding: 5px 15px;">
            Score: <span id="score" style="font-weight: bold">0</span></div>
          <div style="padding: 5px 15px;">
            Drawing: <span id="drawword" style="font-weight: bold"></span>
          </div>
        </div>
        <!-- The onlineUsers -->
        <div id="onlineUsers" class="roundBorderC module">
          <div class="subtitle">
            Online Users</div>
            <ul id="onlineUserTemplate" style="display: none">
            <li>
            <div class="{RoleCSS}"></div>
            <div class="{DrawerCSS}"></div>
            <div class="name">{Name}</div>
            <div class="{StatusCSS}"></div>
            </li>
            </ul>
          <ul id="nicknames">
          </ul>
        </div>
        <a href="javascript:void(0);" id="actionBtn" class="button blue brackets glossy" style="font-size: 18px">Ready</a>
        <a href="javascript:void(0);" id="leaveBtn" class="button blue brackets glossy" style="font-size: 18px">Leave</a>
        
          </section>
          <!-- The Main Game section -->
          <section class="md-auto-max-width">
          <h2>User List</h2>
          <div id="userGridCellTemplate" style="display: none">
            <div class="profile">
            <img src="{Image}" width="180" height="180" />
            </div>
            <div class="info">{Name}
            </div>
          </div>
          <table id="userGrid"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
          </section>
          </div>

          <div  id="game" style="display: none">
        <!-- The Main Game section -->
          <section id="main" class="md-auto-max-width">
          <h2>Game</h2>
        <div class="canvasContainer">
          <canvas id="canvas" width="450" height="450"></canvas>
        </div>
          </section>  

          <!-- The Palette section -->
          <section class="md-auto-max-width">
          <h2>Palette</h2>
          <div style="width: 280px;" id="palette">
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Red" color="FF0000" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Green" color="008000" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Maroon" color="800000" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Purple" color="800080" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Fuchsia" color="FF00FF" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem buttondown" style="background-color: Black" color="000000" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Blue" color="0000FF" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Aqua" color="00FFFF" />
            <a href="javascript:void(0);" class="button brackets back glossy paletteItem" style="background-color: Yellow" color="E5E500"></a>
          </div>
          <div id="drawControlPanel" style="visibility: hidden">
          <a href="javascript:void(0);" id="giveUp" class="button pink serif skew glossy">Give Up</a>
          <a href="javascript:void(0);" id="clear" class="button pink serif skew glossy">Clear</a>
          </div>
          <div style="margin: 10px">
          <input id="message" class="roundBorderB" />
          <a href="#" id="sendBtn" class="button orange drop glass" style="font-size: 18px; padding-left: 0px;">Send</a>
          </div>
        </section>

        <!-- The System Information section -->
        <section class="md-auto-max-width">
        <h2>System Information</h2>
        <div class="roundBorderC module" style="width: 250px; margin-right: 20px">
          <div class="subtitle">System</div>
          <div id="mainArea"></div>
        </div>        
        </section>
        </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var color = '#000000';
    var lineWidth = 10;
    var lineCap = 'butt';
    var userGrids;
    $(function () {
      $('#sendBtn').click(function () {
        socket.emit('user message', room.index, $('#message').val());
        clear();
        $('#mainArea').get(0).scrollTop = 10000000;
        return false;
      });
      context = $('canvas')[0].getContext('2d');
      userGrids = $('#userGrid td');
    });
    function clearCanvas() {
      context.fillStyle = '#fff';
      context.fillRect(0, 0, 480, 480);
    }
    function bindUserInputs() {
      $('canvas').mousedown(function (event) {
        if (!sendDrawing) return;
        drawing = true;
        lastPoint = { x: event.offsetX, y: event.offsetY };
        socket.emit('mousedown', room.index, { offsetX: event.offsetX, offsetY: event.offsetY });
      }).mouseup(function (event) {
        if (!sendDrawing) return;
        drawing = false;
        lastPoint = null;
        socket.emit('mouseup', room.index, { offsetX: event.offsetX, offsetY: event.offsetY });
      }).mousemove(function (event) {
        if (!sendDrawing) return;
        if (!drawing || !lastPoint) return;
        usermousemove(event, color);
        socket.emit('mousemove', room.index, { offsetX: event.offsetX, offsetY: event.offsetY });
        //event.pageX + ", " + event.pageY
      });

      // update something in colors
      $('#palette a').click(function () {
        if (!sendDrawing) return;
        $('#palette a').each(function () {
          $(this).removeClass('buttondown');
        });
        $(this).addClass('buttondown');
        color = '#' + $(this).attr('color');
        socket.emit('palette', room.index, { color: color, lineWidth: lineWidth, lineCap: lineCap });
      });
    }

    function clear() {
      $('#message').val('');
    };

    function usermousemove(event, color) {
      var currentPoint = { x: event.offsetX, y: event.offsetY };
      //$('#test').text(event.offsetX + ", " + event.offsetY);
      drawLine(context, lastPoint, currentPoint, color);
      lastPoint = currentPoint;
    }

    function drawLine(context, start, stop, usercolor) {
      context.strokeStyle = usercolor; // color of line
      context.lineWidth = lineWidth; //width of line
      context.lineCap = lineCap; //type of line : butt\round\square
      context.beginPath(); 
      context.moveTo(start.x, start.y);
      context.lineTo(stop.x, stop.y);
      context.stroke(); 
      context.closePath(); 
    }

    var waitForFinalEvent = (function () {
      var timers = {};
      return function (callback, ms, uniqueId) {
        if (!uniqueId) {
          uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
          clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
      };
    })();

    $(window).resize(function () {
      waitForFinalEvent(function () {
        MD.UI.recalculateAll();
      }, 200, "era1");
    });
  </script>
</body>
</html>
